<template>
  <van-nav-bar
      title="账号与安全"
      style="width: 400px"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="user-settings">
    <van-cell title="重置密码" is-link to="/resetPassword" />
    <van-divider />

    <p class="title">账号绑定</p>
    <van-field v-model="mobilePhone" label="手机号码" readonly />
    <van-button size="large" type="primary" @click="bindMobilePhone">修改</van-button>

    <van-field label="绑定微信" :value="wechat"  />
    <van-switch v-model="wechatStatus" @change="toggleWechat" />

    <van-field label="绑定QQ" :value="qq"  />
    <van-switch v-model="qqStatus" @change="toggleQq" />

    <van-field label="绑定微博" :value="weibo"  />
    <van-switch v-model="weiboStatus" @change="toggleWeibo" />
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
import {ref} from "vue";
const onClickLeft = () => {
  router.push("/systemSettings");
  // 返回按钮逻辑
};
const mobilePhone = ref('187****1234');
const wechat = ref('');
const wechatStatus = ref(false);
const qq = ref('');
const qqStatus = ref(false);
const weibo = ref('');
const weiboStatus = ref(false);

function bindMobilePhone() {
  router.push("/bindMobilePhone");
}

function toggleWechat(status) {
  // 这里应该调用后端接口进行微信绑定或解绑操作
}

function toggleQq(status) {
  // 这里应该调用后端接口进行QQ绑定或解绑操作
}

function toggleWeibo(status) {
  // 这里应该调用后端接口进行微博绑定或解绑操作
}

</script>

<style scoped>
.title {
  margin-bottom: 10px;
}
</style>